<template>
  <section class="el-container is-vertical my-layout__wrapper">
    <main class="el-main my-layout__region my-layout__default">
      <!---->
      <div class="my-pro__main">
        <!---->
        <div data-v-07d49ecc="" class="my-wrapper is-split">
          <div class="my-wrapper__header has-links">
            <!---->
            <div class="my-float my-wrapper__ft">
              <div class="my-float-item my-wrapper__title is-left">
                <!---->高级详情页
              </div>
              <div class="my-float-item my-wrapper__sub-title is-left">

              </div>
            </div>
            <div class="my-wrapper__extra">
              <div
                data-v-07d49ecc=""
                class="el-row"
                style="margin-left: -7px; margin-right: -7px"
              >
                <div
                  data-v-07d49ecc=""
                  class="el-col el-col-16"
                  style="padding-left: 7px; padding-right: 7px"
                >
                  <div
                    data-v-07d49ecc=""
                    class="my-detail is-default is-horizontal"
                  >
                    <div class="my-detail__view">
                      <table>
                        <tbody>
                        <tr class="my-detail__row">
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >创建人</span
                              ><span class="my-detail-item__content"
                          >曲丽丽</span
                          >
                          </td>
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >订购产品</span
                              ><span class="my-detail-item__content"
                          >XX 服务</span
                          >
                          </td>
                        </tr>
                        <tr class="my-detail__row">
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >创建时间</span
                              ><span class="my-detail-item__content"
                          >2017-07-07</span
                          >
                          </td>
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >关联单据</span
                              ><span class="my-detail-item__content"
                          >12421</span
                          >
                          </td>
                        </tr>
                        <tr class="my-detail__row">
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >生效日期</span
                              ><span class="my-detail-item__content"
                          >2017-07-07 ~ 2017-08-08</span
                          >
                          </td>
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >备注</span
                              ><span class="my-detail-item__content"
                          >请于两个工作日内确认</span
                          >
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <div
                  data-v-07d49ecc=""
                  class="el-col el-col-8"
                  style="padding-left: 7px; padding-right: 7px"
                >
                  <div
                    data-v-07d49ecc=""
                    class="el-row"
                    style="margin-left: -7px; margin-right: -7px"
                  >
                    <div
                      data-v-07d49ecc=""
                      class="el-col el-col-12"
                      style="padding-left: 7px; padding-right: 7px"
                    >
                      <div data-v-07d49ecc="" class="my-description is-top">
                        <div class="my-description__title is-right">状态</div>
                        <div
                          class="my-description__content is-right"
                          style="display: block; padding-top: 10px"
                        >
                          <h1
                            data-v-07d49ecc=""
                            class="my-title my-typography my-title--h1"
                            level="1"
                          >
                            待审核
                          </h1>
                        </div>
                      </div>
                    </div>
                    <div
                      data-v-07d49ecc=""
                      class="el-col el-col-12"
                      style="padding-left: 7px; padding-right: 7px"
                    >
                      <div data-v-07d49ecc="" class="my-description is-top">
                        <div class="my-description__title is-right">
                          订单金额
                        </div>
                        <div
                          class="my-description__content is-right"
                          style="display: block; padding-top: 10px"
                        >
                          <h1
                            data-v-07d49ecc=""
                            class="my-title my-typography my-title--h1"
                            level="1"
                          >
                            <div data-v-07d49ecc="" class="my-number">
                              <span class="my-number__prefix">￥</span
                              ><span class="my-number__value">32,443</span
                            ><!----><!---->
                            </div>
                          </h1>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="my-wrapper__links">
              <span class="my-wrapper__links-item is-active"> 详情 </span>
              <span class="my-wrapper__links-item"> 规则 </span>
            </div>
          </div>
          <div class="my-wrapper__body">
            <div data-v-07d49ecc="" class="
                el-card my-panel is-never-shadow
                my-panel--border-left
                is-no-border
              "
            >
            </div>
            <div
              data-v-07d49ecc=""
              class="
                el-card
                my-panel
                is-never-shadow
                my-panel--border-left
                is-no-border
              "
            >
              <div class="el-card__header">
                <div class="my-panel__header">
                  <div class="my-float my-header my-header--border-left">
                    <div class="my-header__content"><!---->用户信息</div>
                    <!---->
                  </div>
                </div>
              </div>
              <div class="el-card__body">
                <div class="my-panel__body">
                  <div
                    data-v-07d49ecc=""
                    class="my-detail is-default is-horizontal"
                  >
                    <div class="my-detail__view">
                      <table>
                        <tbody>
                        <tr class="my-detail__row">
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >用户姓名</span
                              ><span class="my-detail-item__content"
                          >付小小</span
                          >
                          </td>
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >联系电话</span
                              ><span class="my-detail-item__content"
                          >18100000000</span
                          >
                          </td>
                        </tr>
                        <tr class="my-detail__row">
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >常用快递</span
                              ><span class="my-detail-item__content"
                          >菜鸟仓储</span
                          >
                          </td>
                          <td colspan="1" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >取货地址</span
                              ><span class="my-detail-item__content"
                          >取货地址浙江省杭州市西湖区万塘路18号</span
                          >
                          </td>
                        </tr>
                        <tr class="my-detail__row">
                          <td colspan="2" class="my-detail-item__wrap">
                              <span
                                class="
                                  my-detail-item__label my-detail-item--colon
                                  is-left
                                "
                              >备注</span
                              ><span class="my-detail-item__content">无</span>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!----><!---->
              </div>
            </div>
            <div
              data-v-07d49ecc=""
              class="el-card my-panel is-never-shadow is-no-border"
            >
              <div class="el-card__header">
                <div class="my-panel__header my-panel__tabs">
                  <div class="el-tabs el-tabs--top">
                    <div class="el-tabs__header is-top">
                      <div class="el-tabs__nav-wrap is-top">
                        <div class="el-tabs__nav-scroll">
                          <div
                            role="tablist"
                            class="el-tabs__nav is-top"
                            style="transform: translateX(0px)"
                          >
                            <div
                              class=" is-top"
                              style="width: 56px; transform: translateX(0px)"

                            >

                            </div>
                            <div
                              :class="{'is-active':isActive==1}"
                              class="el-tabs__item is-top " style="padding: 0; margin-right: 20px"
                              @click="activeSelect(1)"
                            >
                              选项卡一
                            </div>
                            <div
                              :class="{'is-active':isActive==2}"
                              style="padding: 0; margin-right: 20px"
                              @click="activeSelect(2)"
                              class="el-tabs__item is-top"
                            >
                              选项卡二
                            </div>
                            <div
                              :class="{'is-active':isActive==3}"
                              style="padding: 0; margin-right: 20px"
                              @click="activeSelect(3)"
                              class="el-tabs__item is-top"
                            >
                              选项卡三
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="el-tabs__content">
                      <div
                        role="tabpanel"
                        id="pane-tab1"
                        aria-labelledby="tab-tab1"
                        class="el-tab-pane"
                      ></div>
                      <!----><!---->
                    </div>
                  </div>
                  <!--                  <div class="my-panel__handle">
                                      <div data-v-07d49ecc="" class="el-button-group">
                                        <button
                                          data-v-07d49ecc=""
                                          type="button"
                                          class="el-button el-button&#45;&#45;default el-button&#45;&#45;mini"
                                        >
                                          &lt;!&ndash;&ndash;&gt;<i class="el-icon-edit"></i
                                        >&lt;!&ndash;&ndash;&gt;</button
                                        >
                                        <button
                                          data-v-07d49ecc=""
                                          type="button"
                                          class="el-button el-button&#45;&#45;default el-button&#45;&#45;mini"
                                        >
                                          &lt;!&ndash;&ndash;&gt;<i class="el-icon-share"></i
                                        >&lt;!&ndash;&ndash;&gt;</button
                                        >
                                        <button
                                          data-v-07d49ecc=""
                                          type="button"
                                          class="el-button el-button&#45;&#45;default el-button&#45;&#45;mini"
                                        >
                                          &lt;!&ndash;&ndash;&gt;<i class="el-icon-delete"></i
                                        >&lt;!&ndash;&ndash;&gt;
                                        </button>
                                      </div>
                                    </div>-->
                </div>
              </div>
              <div class="el-card__body" v-if="isActive==1">
                <div class="my-panel__body">
                  <div data-v-07d49ecc="" class="my-table my-table--pager">
                    <div class="my-spin my-spin--nested is-fit">
                      <!---->
                      <div class="my-spin__container">
                        <!---->
                        <div class="my-table__wrapper">
                          <div
                            class="
                              el-table
                              el-table--fit
                              el-table--enable-row-hover
                              el-table--enable-row-transition
                            "
                          >
                            <div class="hidden-columns">
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <!---->
                            </div>
                            <div class="el-table__header-wrapper" >
                              <table
                                cellspacing="0"
                                cellpadding="0"
                                border="0"
                                class="el-table__header"
                                style="width:100%"
                              >
                                <colgroup>
                                  <col name="el-table_2_column_5" width="153"/>
                                  <col name="el-table_2_column_6" width="151"/>
                                  <col name="el-table_2_column_7" width="151"/>
                                  <col name="el-table_2_column_8" width="151"/>
                                  <col name="gutter" width="0"/>
                                </colgroup>
                                <thead class="has-gutter">
                                <tr class="">
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="el-table_2_column_5 is-leaf"
                                  >
                                    <div class="cell">姓名</div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="el-table_2_column_6 is-leaf"
                                  >
                                    <div class="cell">地区</div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="el-table_2_column_7 is-leaf"
                                  >
                                    <div class="cell">发布时间</div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="el-table_2_column_8 is-leaf"
                                  >
                                    <div class="cell">年龄</div>
                                  </th>
                                  <th
                                    class="gutter"
                                    style="width: 0px; display: none"
                                  ></th>
                                </tr>
                                </thead>
                              </table>
                            </div>
                            <div
                              class="el-table__body-wrapper is-scrolling-none"
                            >
                              <table
                                cellspacing="0"
                                cellpadding="0"
                                border="0"
                                class="el-table__body"
                                style="
                                  width: 100%;
                                  transform: translate(0px, 0px);
                                "
                              >
                                <colgroup>
                                  <col name="el-table_2_column_5" width="153"/>
                                  <col name="el-table_2_column_6" width="151"/>
                                  <col name="el-table_2_column_7" width="151"/>
                                  <col name="el-table_2_column_8" width="151"/>
                                </colgroup>
                                <tbody>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">刘刚</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">上海 上海市 黄浦区</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      2007-01-30 01:18:55
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">40</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">邹磊</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      西藏自治区 林芝地区 墨脱县
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      2005-10-23 05:00:37
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">83</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">邹平</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">北京 北京市 顺义区</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1992-10-12 12:14:11
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">19</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">杜勇</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      吉林省 辽源市 东丰县
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1974-02-03 14:26:20
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">20</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">顾明</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      广西壮族自治区 柳州市 鱼峰区
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1995-07-13 12:22:45
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">39</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">雷秀英</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      湖北省 荆门市 东宝区
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1991-02-28 10:34:05
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">24</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">蒋平</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      广东省 揭阳市 惠来县
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1987-06-03 03:23:59
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">84</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">白超</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      福建省 漳州市 龙文区
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      2009-09-09 06:05:46
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">95</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">郑敏</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      贵州省 安顺市 关岭布依族苗族自治县
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      1980-01-20 00:58:19
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">76</div>
                                  </td>
                                </tr>
                                <tr class="el-table__row">
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_5"
                                  >
                                    <div class="cell">孔秀英</div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_6"
                                  >
                                    <div class="cell">
                                      江苏省 盐城市 阜宁县
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_7"
                                  >
                                    <div class="cell">
                                      2020-05-28 03:22:47
                                    </div>
                                  </td>
                                  <td
                                    rowspan="1"
                                    colspan="1"
                                    class="el-table_2_column_8"
                                  >
                                    <div class="cell">100</div>
                                  </td>
                                </tr>
                                <!---->
                                </tbody>
                              </table>

                              <div class="el-table__append-wrapper">

                              </div>
                              <div
                                class="my-table__placeholder"
                                style="height: 432px"
                              ></div>
                            </div>
                            <!----><!----><!----><!---->
                            <div
                              class="el-table__column-resize-proxy"
                              style="display: none"
                            ></div>
                          </div>
                        </div>
                        <!---->
                      </div>
                    </div>
                  </div>
                  <!--                  <div>选项卡二</div>
                                    <div>选项卡三</div>-->
                </div>
                <!----><!---->
              </div>
            </div>
            <div  v-if="isActive==2">  <div class="my-panel__body">
              <div data-v-07d49ecc="" class="my-table my-table--pager">
                <div class="my-spin my-spin--nested is-fit">
                  <!---->
                  <div class="my-spin__container">
                    <!---->
                    <div class="my-table__wrapper">
                      <div
                        class="
                              el-table
                              el-table--fit
                              el-table--enable-row-hover
                              el-table--enable-row-transition
                            "
                      >
                        <div class="hidden-columns">
                          <div></div>
                          <div></div>
                          <div></div>
                          <div></div>
                          <!---->
                        </div>
                        <div class="el-table__header-wrapper" >
                          <table
                            cellspacing="0"
                            cellpadding="0"
                            border="0"
                            class="el-table__header"
                            style="width:100%"
                          >
                            <colgroup>
                              <col name="el-table_2_column_5" width="153"/>
                              <col name="el-table_2_column_6" width="151"/>
                              <col name="el-table_2_column_7" width="151"/>
                              <col name="el-table_2_column_8" width="151"/>
                              <col name="gutter" width="0"/>
                            </colgroup>
                            <thead class="has-gutter">
                            <tr class="">
                              <th
                                colspan="1"
                                rowspan="1"
                                class="el-table_2_column_5 is-leaf"
                              >
                                <div class="cell">姓名</div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="el-table_2_column_6 is-leaf"
                              >
                                <div class="cell">地区</div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="el-table_2_column_7 is-leaf"
                              >
                                <div class="cell">发布时间</div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="el-table_2_column_8 is-leaf"
                              >
                                <div class="cell">年龄</div>
                              </th>
                              <th
                                class="gutter"
                                style="width: 0px; display: none"
                              ></th>
                            </tr>
                            </thead>
                          </table>
                        </div>
                        <div
                          class="el-table__body-wrapper is-scrolling-none"
                        >
                          <table
                            cellspacing="0"
                            cellpadding="0"
                            border="0"
                            class="el-table__body"
                            style="
                                  width: 100%;
                                  transform: translate(0px, 0px);
                                "
                          >
                            <colgroup>
                              <col name="el-table_2_column_5" width="153"/>
                              <col name="el-table_2_column_6" width="151"/>
                              <col name="el-table_2_column_7" width="151"/>
                              <col name="el-table_2_column_8" width="151"/>
                            </colgroup>
                            <tbody>
                            <tr class="el-table__row">
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_5"
                              >
                                <div class="cell">刘刚</div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_6"
                              >
                                <div class="cell">上海 上海市 黄浦区</div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_7"
                              >
                                <div class="cell">
                                  2007-01-30 01:18:55
                                </div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_8"
                              >
                                <div class="cell">40</div>
                              </td>
                            </tr>
                            <tr class="el-table__row">
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_5"
                              >
                                <div class="cell">邹磊</div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_6"
                              >
                                <div class="cell">
                                  西藏自治区 林芝地区 墨脱县
                                </div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_7"
                              >
                                <div class="cell">
                                  2005-10-23 05:00:37
                                </div>
                              </td>
                              <td
                                rowspan="1"
                                colspan="1"
                                class="el-table_2_column_8"
                              >
                                <div class="cell">83</div>
                              </td>
                            </tr>

                            <!---->
                            </tbody>
                          </table>

                          <div class="el-table__append-wrapper">

                          </div>
                          <div
                            class="my-table__placeholder"
                            style="height: 432px"
                          ></div>
                        </div>
                        <!----><!----><!----><!---->
                        <div
                          class="el-table__column-resize-proxy"
                          style="display: none"
                        ></div>
                      </div>
                    </div>
                    <!---->
                  </div>
                </div>
              </div>
              <!--                  <div>选项卡二</div>
                                <div>选项卡三</div>-->
            </div></div>
            <div  v-if="isActive==3">121212</div>
          </div>
          <!---->
        </div>
      </div>
    </main>
  </section>
</template>

<script>
import echarts from "echarts";
import {listInfo} from "@/api/enterprise/info";

export default {
  name: "index",
  data() {
    return {
      status: true,
      goIndex: 0,
      statusShow: 0,
      isActive:2,
      // 版本号
      version: "3.6.0",
      active: false,
      activeIndex: 1,
      ruleIndex: 1,
      position: {},
      show: false,
      hangyeArr: [],
      from: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      markers: [
        // {
        //     longitude:107.241123,
        //     latitude:34.366293,
        //     scenicName:11,
        //     showFlag:false
        //
        // },
        // {
        //     longitude:113.67,
        //     latitude:37.9,
        //     scenicName:11,
        //     showFlag:false
        // },
      ],
      name: "",
      scenicContent: "",
      markerPoint1: {lng: 107.241123, lat: 34.366293},
      str: [
        {
          markerPoint: {lng: 113.67, lat: 38.9},
          xianghao: "BADWQI32221",
          adds: "差分状态:N",
          time: "上报时间:2020/11/01 13:48",
        },
        {
          markerPoint: {lng: 118.52, lat: 31.79},
          xianghao: "ABCD873873",
          adds: "差分状态:Y",
          time: "上报时间:2020/11/23 13:48",
        },
        {
          markerPoint: {lng: 116.404, lat: 39.915},
          xianghao: "EERQSIA21",
          adds: "差分状态:N",
          time: "上报时间:2018/11/23 11:48",
        },
      ],
    };
  },
  created() {
  },
  mounted() {
    this.getList();
    this.getInfo(); //地图列表
  },
  methods: {
    activeIndexTem(index) {
      this.activeIndex = index;
    },
    activeSelect(index){
      console.log(index)

      this.isActive=index;
    },
    rule(index) {
      this.ruleIndex = index;
    },
    gomap() {
      this.status = false;
    },

    goItem(status) {
      this.statusShow = status;
      console.log(status);
    },
    //地图列表
    getInfo() {
      listInfo("").then((res) => {
        var arr = [];
        // this.markers.push(
        //     {
        //         longitude:107.241123,
        //         latitude:34.366293,
        //         scenicName:11,
        //         showFlag:false
        //     }
        // )
        for (var i = 0; i < res.rows.length; i++) {
          arr.push({
            longitude: res.rows[i].epLg,
            latitude: res.rows[i].epLt,
            scenicName: res.rows[i].epName,
            showFlag: false,
          });
        }
        console.log(arr);
        this.markers = arr;
      });
    },

    getList() {
      this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
      this.commandstats.setOption({
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     subtext: '',
        //     left: 'center'
        // },
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b} : {c} ({d}%)'
        // },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        // },
        // toolbox: {
        //     show: true,
        //     feature: {
        //       mark: {show: true},
        //       dataView: {show: true, readOnly: false},
        //       restore: {show: true},
        //       saveAsImage: {show: true}
        //     }
        // },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [25, 90],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              {value: 40, name: "固定"},
              {value: 38, name: "一般"},
              {value: 32, name: "其他"},
              {value: 30, name: "其他"},
            ],
          },
        ],
      });
      this.commandstats = echarts.init(this.$refs.commandstats2, "macarons");
      this.commandstats.setOption({
        legend: {
          bottom: 10,
          left: "center",
        },
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     subtext: '',
        //     left: 'center'
        // },
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b} : {c} ({d}%)'
        // },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        // },
        // toolbox: {
        //     show: true,
        //     feature: {
        //       mark: {show: true},
        //       dataView: {show: true, readOnly: false},
        //       restore: {show: true},
        //       saveAsImage: {show: true}
        //     }
        // },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [25, 70],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    "#00FFFF",
                    "#00FF00",
                    "#FFFF00",
                    "#FF8C00",
                    "#FF0000",
                    "#FE8463",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [
              {value: 40, name: "固定"},
              {value: 38, name: "一般"},
              {value: 32, name: "其他"},
              {value: 30, name: "其他"},
            ],
          },
        ],
      });
      this.commandstats = echarts.init(this.$refs.commandstats3, "macarons");
      this.commandstats.setOption({
        // title: {
        //     text: '动态数据',
        //     subtext: '纯属虚构'
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        legend: {
          data: ["最新成交价", "预购队列"],
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },

        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#09CCDE", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
          {
            type: "category",
            boundaryGap: true,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(10 - len - 1);
              }
              return res;
            })(),
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "价格",
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#09CCDE", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
          {
            type: "value",
            scale: true,
            name: "预购量",
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#09CCDE", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
        ],
        series: [
          {
            name: "预购队列",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 1000));
              }
              return res;
            })(),
            itemStyle: {
              normal: {
                color: "#34ABFF", //折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)", //折线的颜色
                },
              },
            },
          },
          {
            name: "最新成交价",
            type: "line",
            data: (function () {
              var res = [];
              var len = 0;
              while (len < 10) {
                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                len++;
              }
              return res;
            })(),
            itemStyle: {
              normal: {
                color: "rgba(255, 191, 0)", //折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)", //折线的颜色
                },
              },
            },
          },
        ],
      });

      this.commandstats = echarts.init(this.$refs.commandstats4, "macarons");
      this.commandstats.setOption({
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        // title: {
        //     padding: [50,20],
        //     textStyle:{
        //         color:'#fff',        //颜色
        //         fontStyle:'normal',     //风格
        //         fontWeight:'normal',    //粗细
        //         fontFamily:'Microsoft yahei',   //字体
        //         fontSize:14,     //大小
        //         align:'center'   //水平对齐
        //     },
        //     text: '渐变堆叠面积图'
        // },
        tooltip: {
          trigger: "axis",
          padding: [20, 20, 100, 100],
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["无使用"],
          y: "80px",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
          top: "40%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#09CCDE", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#09CCDE", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
        ],
        series: [
          // {
          //     name: 'Line 1',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(128, 255, 165)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(1, 191, 236)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [140, 432, 501, 164, 7, 340, 250]
          // },
          // {
          //     name: 'Line 2',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(0, 221, 255)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(77, 119, 255)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [120, 282, 111, 234, 220, 340, 310]
          // },
          // {
          //     name: 'Line 3',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(55, 162, 255)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(116, 21, 219)'
          //         }])
          //     },
          //     // emphasis: {
          //     //     focus: 'series'
          //     // },
          //     data: [320, 132, 201, 334, 190, 130, 220]
          // },
          // {
          //     name: 'Line 4',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(255, 0, 135)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(135, 0, 157)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [10, 22, 31, 34, 90, 30, 20]
          // },
          {
            name: "无使用",
            // type: 'line',
            stack: "总量",
            // smooth: true,
            lineStyle: {
              width: 0,
            },
            type: "line",
            showSymbol: false,

            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              normal: {
                color: "#386db3", //折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)", //折线的颜色
                },
              },
            },

            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },

            data: [10, 302, 31, 234, 40, 290, 150],
          },
        ],
      });
      this.commandstats = echarts.init(this.$refs.commandstats5, "macarons");
      this.commandstats.setOption({
        // title: {
        //     text: '基础雷达图'
        // },
        // legend: {
        //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: "我的数据", max: 6500},
            {name: "我的数据", max: 16000},
            {name: "我的数据", max: 30000},
            {name: "我的数据", max: 38000},
            {name: "我的数据", max: 52000},
            {name: "我的数据", max: 25000},
          ],
          splitArea: {
            areaStyle: {
              color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "预算分配（Allocated Budget）",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "实际开销（Actual Spending）",
              },
            ],
          },
        ],
      });
    },
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    infoWindowOpen(marker) {
      marker.showFlag = true;
      // this.$router.push({
      //     path:"/enterprise/info"
      // })
    },
    infoWindowOpen2() {
      this.$router.push({
        path: "/enterprise/info",
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/new1.css";

.layui-getActive {
  background-color: #0d99f4;
  color: #fff;
}

.header-box {
}

.header-box-item {
  display: flex;
  justify-content: space-between;
  padding-left: 44px;
  padding-top: 20px;
  padding-right: 32px;
}

.header-box-dh {
  height: 40px;
}

.header-title {
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  margin-bottom: 10px;
}

.header-sub-m {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}

.h-content {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 44px;

  background-color: #f0f2f5;
}

.header-box {
  background-color: #fff;
}

.header-box-left {
  display: flex;
}

.header-btn {
  width: 74px;
  height: 32px;
  line-height: 32px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(217, 217, 217, 1);
}

.user-content {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.user-content .user-title {
  height: 55px;
  line-height: 55px;
  padding-left: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.user-box {
  display: flex;
  padding-left: 32px;
}

.user-box-item {
  width: 33.333%;
  padding-top: 24px;
}

.user-box-name {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}

.user-box-name span {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}

.user-bttom {
  margin-bottom: 16px;
}

.multilayer {
  width: 96.5%;
  border: 1px solid #e9e9e9;
  margin: 0 auto;
}

.multilayer-title {
  height: 44px;
  line-height: 44px;

  padding-left: 24px;
  background-color: #fafafa;
}

.mu-cz-item {
  width: 140px;
  height: 48px;
  line-height: 48px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  text-align: center;
}

.mu-cz-box {
  display: flex;
}

.mu-cz-item-active {
  background-color: rgba(24, 144, 255, 0.2);
  border-bottom: 2px solid rgba(24, 144, 255, 1);
}
.is-active{

  border-bottom: 3px solid rgba(24, 144, 255, 1);;
}
</style>


<!--
<style lang="scss" scoped>


　@import'../../assets/styles/layui.css';
.app-sum {
  ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;

    .add-item-box {
      width: 24.5%;
      height: 184px;
      background-color: red;
      border-radius: 10px;

      .add-item-box-item {
        display: flex;
        justify-content: space-between;
        padding: 31px 23px;

        .add-item-box-item-title {
          width: 205px;

          .add-item-box-item-title-box {
            height: 36px;
            border-bottom: 1px solid #E9E9E9;
            display: flex;

            .a-i-b-icon {
              width: 22px;
              height: 22px;
              margin-right: 10px;
            }

            .a-i-b-text {
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
            }
          }

          .add-item-box-item-sub {
            display: flex;
            align-items: center;
            margin-top: 10px;
            color: #fff;

            .a-i-b-i-s {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
            }

            .a-i-b-i-smell-n {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
              margin-left: 21px;
            }

            .a-i-b-i-n {
              font-size: 24px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              margin-left: 21px;
            }
          }
        }

        .add-item-box-item-icon {
          .a-i-b-i-icon1 {
            width: 112px;
            height: 112px;
          }
        }
      }

    }

    .add-item1 {
      background: url("../assets/images/navBg1.png");
      background-size: 100% 100%;
    }

    .add-item2 {
      background: url("../assets/images/navBg2.png");
      background-size: 100% 100%;
    }

    li {
      list-style: none;
    }
  }


}

.content-middle {
  display: flex;
  width: 100%;
  margin-top: 10px;

  .content-middle-left {
    width: 55%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .c-m-item {
      width: 50%;
      height: 292px;
      background: url("../assets/images/middle-center.png");
      background-size: 100% 100%;

      .c-m-item-title {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #F3F3F3;
        margin-top: 32px;
        margin-left: 42px;
      }
    }
  }

  .content-middle-right {
    width: 45%;
    height: 594px;
    background: url("../assets/images/middle-center.png");
    background-size: 100% 100%;
  }

}

.content-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .c-f-item {
    width: 32%;
    height: 350px;
    background-color: red;
  }

  .echarsPie {
    width: 70%;
    height: 50%;
  }

  .c-left {
    width: 40%;
  }

  .c-right {
    width: 58%;
  }
}

/*.home {*/
/*  blockquote {*/
/*    padding: 10px 20px;*/
/*    margin: 0 0 20px;*/
/*    font-size: 17.5px;*/
/*    border-left: 5px solid #eee;*/
/*  }*/
/*  hr {*/
/*    margin-top: 20px;*/
/*    margin-bottom: 20px;*/
/*    border: 0;*/
/*    border-top: 1px solid #eee;*/
/*  }*/
/*  .col-item {*/
/*    margin-bottom: 20px;*/
/*  }*/

/*  ul {*/
/*    padding: 0;*/
/*    margin: 0;*/
/*  }*/

/*  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
/*  font-size: 13px;*/
/*  color: #676a6c;*/
/*  overflow-x: hidden;*/

/*  ul {*/
/*    list-style-type: none;*/
/*  }*/

/*  h4 {*/
/*    margin-top: 0px;*/
/*  }*/

/*  h2 {*/
/*    margin-top: 10px;*/
/*    font-size: 26px;*/
/*    font-weight: 100;*/
/*  }*/

/*  p {*/
/*    margin-top: 10px;*/

/*    b {*/
/*      font-weight: 700;*/
/*    }*/
/*  }*/

/*  .update-log {*/
/*    ol {*/
/*      display: block;*/
/*      list-style-type: decimal;*/
/*      margin-block-start: 1em;*/
/*      margin-block-end: 1em;*/
/*      margin-inline-start: 0;*/
/*      margin-inline-end: 0;*/
/*      padding-inline-start: 40px;*/
/*    }*/
/*  }*/
/*}*/
.map {
  width: 100%;
  height: 100vh;
}
</style>
-->

